import { Tooltip } from 'antd';
import { FC } from 'react';

import Icons from '@/components/Icons';

import styles from './index.module.less';

export type UploadItemListProps = Record<string, any>;

const file = {
  fullName: '图片1.jpg',
  suffix: '.jpg',
  type: 'image/png',
  fullSize: '20.1KB',
  size: 47590,
  uid: 'rc-upload-1676443191501-2',
  thumbUrl:
    ''
};

const UploadItemList: FC<UploadItemListProps> = () => {
  return (
    <div className={styles.rbUploadItemWapper}>
      <div className={styles.rbUploadItem}>
        <div className={styles.rbUploadItemThumbImgWapper}>
          <img className={styles.rbUploadItemThumbImg} src={file.thumbUrl} />
        </div>
        <div className={styles.rbUploadItemImgName}>
          <Tooltip color="white" title={<div style={{ color: 'black' }}>{file.fullName}</div>}>
            {file.fullName}
          </Tooltip>
        </div>
        <div className={styles.rbUploadItemImgSize}>{file.fullSize}</div>
        <div className={styles.rbUploadItemOperationWapper}>
          <Icons type="EyeOutlined" className={styles.rbUploadItemOperationIconCommon} />
          <Icons type="DownloadOutlined" className={styles.rbUploadItemOperationIconCommon} />
          <Icons type="DeleteOutlined" className={styles.rbUploadItemOperationIconCommon} />
        </div>
      </div>
    </div>
  );
};

export default UploadItemList;
